<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0" />
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
		<title>首页</title>
		<link rel="stylesheet" href="common/vant.min.css" />
		<script src="../common/vue.js"></script>
		<script src="../common/vant.min.js"></script>
		<script src="../common/axios.min.js"></script>
		<script src="../common/Session.js"></script>
		<script src="../common/Tools.js"></script>
		<script src="../common/Validate.js"></script>
		<script src="../common/Page.js"></script>
		<script src="../common/Http.js"></script>
		<meta name="author" content="DIY官网 http://www.diygw.com" />
		<link rel="stylesheet" href="common/diygw-ui/index.css" />
	</head>
	<body>
		<div id="app">
			<div class="container">
				<div class="diygw-title diygw-top solid-bottom" style="color: white; background: #07c160">
					<div class="title flex1 text-center">首页</div>
				</div>
				<div class="flex diygw-col-24 diygw-bottom">
					<div class="diygw-grid diygw-actions">
						<button class="diygw-action">
							<div class="diygw-grid-inner">
								<div class="diygw-grid-icon diygw-avatar">
									<img mode="aspectFit" class="diygw-avatar-img" src="./static/grid1.png" />
								</div>
								<div class="diygw-grid-title">菜单一</div>
							</div>
						</button>
						<button class="diygw-action">
							<div class="diygw-grid-inner">
								<div class="diygw-grid-icon diygw-avatar">
									<img mode="aspectFit" class="diygw-avatar-img" src="./static/grid2.png" />
								</div>
								<div class="diygw-grid-title">菜单二</div>
							</div>
						</button>
						<button class="diygw-action">
							<div class="diygw-grid-inner">
								<div class="diygw-grid-icon diygw-avatar">
									<img mode="aspectFit" class="diygw-avatar-img" src="./static/grid3.png" />
								</div>
								<div class="diygw-grid-title">菜单三</div>
							</div>
						</button>
						<button class="diygw-action">
							<div class="diygw-grid-inner">
								<div class="diygw-grid-icon diygw-avatar">
									<img mode="aspectFit" class="diygw-avatar-img" src="./static/grid4.png" />
								</div>
								<div class="diygw-grid-title">菜单四</div>
							</div>
						</button>
					</div>
				</div>
				<div class="flex diygw-col-24">
					<van-swipe class="swiper" indicator-color="rgba(51, 51, 51, 0.39)" indicator-active-color="#fff" indicator-dots="true" autoplay="3000" interval="3000" circular="true" style="height: 150px">
						<van-swipe-item class="diygw-swiper-item">
							<div class="diygw-swiper-item-wrap">
								<img src="./static/pic1.jpg" class="diygw-swiper-image" />
								<div class="diygw-swiper-item-title">滑块一</div>
							</div>
						</van-swipe-item>
						<van-swipe-item class="diygw-swiper-item">
							<div class="diygw-swiper-item-wrap">
								<img src="./static/pic2.jpg" class="diygw-swiper-image" />
								<div class="diygw-swiper-item-title">滑块二</div>
							</div>
						</van-swipe-item>
						<van-swipe-item class="diygw-swiper-item">
							<div class="diygw-swiper-item-wrap">
								<img src="./static/pic3.jpg" class="diygw-swiper-image" />
								<div class="diygw-swiper-item-title">滑块三</div>
							</div>
						</van-swipe-item>
					</van-swipe>
				</div>
				<div class="flex diygw-autoview diygw-col-24 flex-direction-column autoview-clz">
					<div class="diygw-absolute autoview_0">
						<div style="height: 200px" class="flex diygw-col-24">
							<qiun-data-charts type="column" :opts="columnOpts" :chartData="columnData" />
						</div>
					</div>
				</div>
				<div class="flex diygw-col-24">
					<div class="diygw-grid col-3">
						<div class="diygw-grid-item">
							<div class="diygw-grid-inner">
								<div class="diygw-grid-icon diygw-avatar radius">
									<img mode="aspectFit" class="diygw-avatar-img radius" src="./static/grid1.png" />
								</div>
								<div class="diygw-grid-title">菜单一</div>
							</div>
						</div>
						<div class="diygw-grid-item">
							<div class="diygw-grid-inner">
								<div class="diygw-grid-icon diygw-avatar radius">
									<img mode="aspectFit" class="diygw-avatar-img radius" src="./static/grid2.png" />
								</div>
								<div class="diygw-grid-title">菜单二</div>
							</div>
						</div>
						<div class="diygw-grid-item">
							<div class="diygw-grid-inner">
								<div class="diygw-grid-icon diygw-avatar radius">
									<img mode="aspectFit" class="diygw-avatar-img radius" src="./static/grid3.png" />
								</div>
								<div class="diygw-grid-title">菜单三</div>
							</div>
						</div>
						<div class="diygw-grid-item">
							<div class="diygw-grid-inner">
								<div class="diygw-grid-icon diygw-avatar radius">
									<img mode="aspectFit" class="diygw-avatar-img radius" src="./static/grid4.png" />
								</div>
								<div class="diygw-grid-title">菜单四</div>
							</div>
						</div>
						<div class="diygw-grid-item">
							<div class="diygw-grid-inner">
								<div class="diygw-grid-icon diygw-avatar radius">
									<img mode="aspectFit" class="diygw-avatar-img radius" src="./static/grid5.png" />
								</div>
								<div class="diygw-grid-title">菜单五</div>
							</div>
						</div>
						<div class="diygw-grid-item">
							<div class="diygw-grid-inner">
								<div class="diygw-grid-icon diygw-avatar radius">
									<img mode="aspectFit" class="diygw-avatar-img radius" src="./static/grid6.png" />
								</div>
								<div class="diygw-grid-title">菜单六</div>
							</div>
						</div>
					</div>
				</div>
				<div class="flex diygw-col-24">
					<van-swipe class="swiper" indicator-color="rgba(51, 51, 51, 0.39)" indicator-active-color="rgba(64, 64, 64, 0.93)" indicator-dots="true" autoplay="3000" interval="3000" circular="true" style="height: 150px">
						<van-swipe-item class="diygw-swiper-item">
							<div class="diygw-swiper-item-wrap"></div>
						</van-swipe-item>
						<van-swipe-item class="diygw-swiper-item">
							<div class="diygw-swiper-item-wrap"></div>
						</van-swipe-item>
						<van-swipe-item class="diygw-swiper-item">
							<div class="diygw-swiper-item-wrap"></div>
						</van-swipe-item>
					</van-swipe>
				</div>
				<div class="version text-grey flex-direction-column flex diygw-col-24 justify-center align-center">
					<div>DIY官网提供技术支持</div>
					<div>http://www.diygw.com</div>
				</div>
				<div class="clearfix"></div>
			</div>
		</div>
	</body>
	<script type="module">
		// const app = Vue.createApp({
		// 	data() {
		// 		return {
		// 			columnOpts: { type: 'column', color: ['#1890FF', '#91CB74', '#FAC858', '#EE6666', '#73C0DE', '#3CA272', '#FC8452', '#9A60B4', '#ea7ccc'], padding: [15, 15, 0, 5], xAxis: { disableGrid: true }, yAxis: { data: [{ min: 0 }] }, legend: {}, extra: { column: { type: 'group', width: 30, linearType: 'custom', linearOpacity: 0.9, barBorderCircle: true, activeBgColor: '#000000', activeBgOpacity: 0.08 } } },
		// 			columnData: {
		// 				categories: ['2018', '2019', '2020', '2021'],
		// 				series: [
		// 					{ name: '目标值', data: [35, 36, 31, 33] },
		// 					{ name: '完成量', data: [18, 27, 21, 24] }
		// 				]
		// 			}
		// 		};
		// 	},
		// 	created() {
		// 		this.init();
		// 	},
		// 	methods: {
		// 		async init() {}
		// 	}
		// });
		// app.use(vant);
		// app.config.globalProperties.$tools = new Tools();
		// app.config.globalProperties.$http = httpService;
		// app.config.globalProperties.$session = Session;
		// app.mixin({
		// 	methods: {
		// 		Validate,
		// 		setData,
		// 		navigateTo,
		// 		showModal,
		// 		showToast,
		// 		uploadImage
		// 	}
		// });
		// app.mount('#app');
	</script>
	<style>
		.autoview-clz {
			z-index: 1000;
			height: 200px;
		}

		.autoview_0 {
			left: 56rpx;
			top: 40rpx;
			width: 600rpx;
			height: 300rpx;
			z-index: 0;
		}
		.autoview_0 > .flex {
			height: 100%;
		}
		.grid-item-clz {
			font-size: 12px;
		}
		.grid-icon-clz {
			width: 50px;
			height: 50px;
			font-size: calc(50px - 4px) !important;
		}
		.container {
			padding-left: 0px;
			padding-right: 0px;

			font-size: 12px;
		}
		.container {
			padding-top: 45px;
			padding-bottom: 80px;
		}
	</style>
</html>
